<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单排单</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <span>选择排单:</span>
    <el-select v-model="list" placeholder="选择排单" @change="orderSort">
        <el-option label="选择排单" value="0"></el-option>
        <el-option label="按日期排单" value="1"></el-option>
        <el-option label="按产能排单" value="2"></el-option>
    </el-select>

    <el-row>
        <el-col :span="2"><span>每页显示条数:</span></el-col>
        <el-col :span="6">
            <!--每页显示条数-->
            <el-pagination
                    @size-change="handleSizeChange"
                    :current-page="current"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="sizes"
                    :total="total">
            </el-pagination>
        </el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <!--数据表格-->
    <el-table
            ref="orderTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%">
        <el-table-column
                label="序号"
                type="index"
                width="80">
        </el-table-column>
        <el-table-column
                label="订单编号"
                sortable
                prop="orderId"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单类型"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.orderType }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="生产计划编号"
                sortable
                prop="productPlanNo"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.productPlanNo }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="型号"
        >
            <template slot-scope="scope">
                <span v-if="scope.row.product==null"></span>
                <span v-else>{{ scope.row.product.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="责任产线"
        >
            <template slot-scope="scope">
                <span v-if="scope.row.productionLine==null"></span>
                <span v-else>{{ scope.row.productionLine.productionName }}</span>
                <!--<span >{{ scope.row.productionLine.productionName }}</span>-->
            </template>
        </el-table-column>
        <el-table-column
                label="数量"
                sortable
                prop="number"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.number }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="开始生产日期"
                sortable
                prop="productPlanTime"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.productPlanTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="结束生产日期"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.productPlanOvertime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="备注">
            <template slot-scope="scope">
                <span>{{ scope.row.remark }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态">
            <template slot-scope="scope">
                <span v-if="scope.row.t_orderStatus==null"></span>
                <span v-else>{{ scope.row.t_orderStatus.allStatus }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        v-if="scope.row.productionLine==null || (scope.row.t_orderStatus != null && scope.row.t_orderStatus.allStatus=='待生产')"
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.$index, scope.row)">设置排单</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6">
            <span v-if="current * pageSize > total">第{{current * pageSize - pageSize + 1}}到{{total}}条记录,共{{total}}条</span>
            <span v-else>第{{current * pageSize - pageSize + 1}}到{{current * pageSize}}条记录,共{{total}}条</span>
        </el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6">
            <!--分页-->
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="pageSize"
                    :current-page="current"
                    @current-change="loadPage"
            >
            </el-pagination>
        </el-col>
    </el-row>
    <!--订单排单的对话框-->
    <el-dialog title="订单排单" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="orderList">
            <el-form-item label="订单编号" :label-width="formLabelWidth">
                <el-input v-model="orderList.orderId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生产计划编号" :label-width="formLabelWidth">
                <el-input v-model="orderList.productPlanNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生产线" :label-width="formLabelWidth">
                <el-select v-model="orderList.productLineId" placeholder="请选择产线">
                    <!--v-model与value双向绑定-->
                    <el-option
                            v-for="item in productLine"
                            :key="item.id"
                            :label="item.productionName"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始生产日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="orderList.productPlanTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束生产日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="orderList.productPlanOvertime"
                        type="datetime"
                        placeholder="选择日期时间"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-select v-model="orderList.productStatus" placeholder="请选择产品">
                    <!--v-model与value双向绑定-->
                    <el-option
                            v-for="item in orderStatusList"
                            :key="item.id"
                            :label="item.allStatus"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updOrder">确 定</el-button>
        </div>
    </el-dialog>

</div>

<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                list:'',//选择排单
                tableData:null,//表格数据
                total:0,//总条数
                current:1,//当前页数
                pageSize:5, //每页条数
                dialogFormVisible:false, //控制订单排单对话框的显示
                productLine:null, //生产线表
                orderList:{//订单排单
                    id:'',//id
                    orderId:'',//订单编号
                    productPlanNo:'',//生产计划编号
                    productLineId:'',//责任产线
                    productPlanTime:'',//开始生产日期
                    productPlanOvertime:'',//结束生产日期
                    productStatus:'' //生产状态
                },
                formLabelWidth: '120px', //表单标签的宽度
                orderStatusList:null //所有生产状态
            }
        },
        methods:{
            //当页跳转的方法
            loadPage(current,pageSize){
                this.current = current;
                    axios.get("/orders2?current="+current+"&pageSize="+this.pageSize+"&list="+this.list).then(value=>{
                        if(value.data.code == 1){
                            this.tableData = value.data.data.records;
                            this.total = value.data.data.total;
                            this.current = value.data.data.current;
                            this.pageSize = value.data.data.size;
                        }
                    });
            },
            //操作:设置排单
            handleEdit(index, row) {
                console.log(index, row);
                this.orderList = row
                this.dialogFormVisible = true
            },
            //每页条数改变是触发
            handleSizeChange(pageSize) {
                this.current = 1;
                this.pageSize = pageSize;
                this.loadPage(this.current,pageSize);
            },
            //订单排单确认按钮
            updOrder(){
                axios.put("/order-list",this.orderList).then(value => {
                    if (value.data.code == 1){
                        this.loadPage(this.current,this.pageSize);
                    }
                    this.dialogFormVisible = false;//控制添加订单对话框的显示
                })
            },
            //关闭订单排单对话框
            closeMyDialog(){
                this.orderList={//订单排单
                    id:'',//id
                    orderId:'',//订单编号
                    productPlanNo:'',//生产计划编号
                    productLineId:'',//责任产线
                    productPlanTime:'',//开始生产日期
                    productPlanOvertime:'',//结束生产日期
                    productStatus:'' //生产状态
                }
                this.dialogFormVisible = false
            },
            //排序
            orderSort(val){
                this.list = val
                //分页
                this.loadPage(1,5);
            }
        },
        mounted(){
            //分页
            this.loadPage(1,5);
            //查询生产线表
            axios.get("/productionLines").then(value => {
                if (value.data.code == 1){
                    this.productLine = value.data.data
                }
            });
            //生产状态
            axios.get("/orderStatus2").then(value => {
                if (value.data.code == 1){
                    this.orderStatusList = value.data.data
                }
            });
        }
    })
</script>
</body>
</html>